<template>
    <div class="backgroundColor container fixed purse">
      <div style="position:absolute;top:0px;right:0;width:100vw;height: 100vh;z-index: 4" @click="maskHide" v-if="markShow"></div>
      <Header
        :background="{background:'#292a3a'}"
        content="钱包"
        :showBack="false"
        :showRightSel="true"
        @right="seleCoin"
        :current="current"
        :list="listDown"
        @downItem="downItem"
        :showRightDwon="showRightDwon"></Header>
      <div style="padding: 15px;">
        <scroller
          :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
          :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
          lock-x
          height="-115"
          ref="purse"
          @on-pullup-loading="onScrollBottom()"
          :use-pullup="true"
          :use-pulldown="true"
          @on-pulldown-loading="onScrollTop()"
        >
          <div>
            <div>
            <span class="font15" style="color:#BBBBC0;">
              总资产约
            </span>
              <span class="font20">
              {{total}}
            </span>
              <span class="font15">
              {{current.mark}}
            </span>
            </div>
            <ul>
              <li v-for="item,index in list" class="item" @click="goTo({name:'recharge',params:{id:item.aid}})">
                <img :src="item.bg" alt="" style="position: absolute;right: 0px;top:0;z-index: 0;width: 80px;">
                <div style="position: relative;z-index: 1">
                  <div class="flex">
                    <div class="font20" style="margin-bottom: 6px;" :style="{color:item.color}">
                      {{item.mark}}
                    </div>
                    <div class="font20">
                      {{item.balance | add(item.invest,item.extend)}}
                    </div>
                  </div>
                  <div v-if="item.takeout == 1">
                    <div class="flex font13">
                      <span style="color:#BBBBC0;">本金</span>
                      <span>{{item.balance}} {{item.mark}}</span>
                    </div>
                    <div class="flex font13" style="margin-top:5px;">
                      <span style="color:#BBBBC0;">投资</span>
                      <span>{{item.invest}} {{item.mark}}</span>
                    </div>
                    <div class="flex font13" style="margin-top:5px;">
                      <span style="color:#BBBBC0;">推广</span>
                      <span>{{item.extend}} {{item.mark}}</span>
                    </div>
                    <div class="flex font13" style="margin-top:5px;">
                      <span style="color:#BBBBC0;">分红</span>
                      <span>{{item.bonus}} {{item.mark}}</span>
                    </div>
                  </div>
                  <div v-if="item.takeout == 0">
                    <div class="font13" style="color:#BBBBC0;">
                      暂时不支持提币，未来上交易所即可开放提币交易
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </scroller>
      </div>
    </div>
</template>
<script>
  import Header from './common/header.vue'
  import {Scroller} from 'vux'
  export default{
    data(){
        return {
           list:[],
           listDown:[],
           total:'',
           current:{},
           showRightDwon:false,
           markShow:false,
           onFetching1:false,
//           onFetching:false,
        }
    },
    methods:{
      onScrollBottom(){
        if (this.onFetching) {} else {
          this.onFetching = true;
          this.walletlist();
        }
      },
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.walletlist();
        }
      },
      areawallet(){
        this.service('areawallet',{},'get').then(res=>{
          this.listDown = res.data.arealist;
          this.current =res.data.arealist[0];
          this.walletlist();
        })
      },
      maskHide(){
        this.showRightDwon = false;
        this.markShow = false;
      },
      downItem(data){
        this.current =data;
        this.showRightDwon = false;
        this.markShow = false;
        this.walletlist()
      },
      seleCoin(){
        this.showRightDwon = !this.showRightDwon;
        this.markShow = !this.markShow
      },
      goTo(path){
        this.$router.push(path)
      },
      walletlist(){
        this.loading(true)
        this.service('walletlist',{
          convert:this.current.id || 1
        },'post').then(res=>{
          this.loading(false)
          this.list = res.data.list;
          if(!this.current.id){
            this.current = this.list[0];
          }
          this.total = res.data.total;
          this.$nextTick(() => {
            this.$refs.purse.donePulldown();
            this.$refs.purse.disablePullup();
          })
          this.onFetching = false;
          this.onFetching1 = false;
        })
      }
    },
    created(){
      this.areawallet()
    },
    components:{
      Header,Scroller
    }
  }
</script>
<style>
  .purse .item{
    /*float: left;*/
    /*width: calc(50% - 5px);*/
    background: -webkit-linear-gradient(right top,#454555,#3D3E4D); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right,#454555,#3D3E4D); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right,#454555,#3D3E4D); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom left,#454555,#3D3E4D); /* 标准的语法（必须放在最后） */
    margin-top: 10px;
    padding:20px;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;

  }
  .leftItem{
    margin-right: 10px;
  }
  .purse .vux-header .vux-header-right{
    right: 0;
    background: #454555;
    height: 32px;
    line-height: 32px;
    padding:0 10px 0 15px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    top:8px;
    width: 110px;
    z-index:16!important;
    box-sizing: border-box;
  }
</style>
